<div class="row">
    <div class="span6 offset3">
        <div class="well" style="width: 400px;background-color:  #fff"">
        <input type="hidden" id="usr_id" value="<?php echo $usrId;?>">
        <table width="100%" >
            <thead>
              <tr>
                <th colspan="2" style="text-align:left;">
                  <div class="page-header">
                    <h3>Perfil</h3>
                    <p><small>Esta información aparece en tu perfil público, resultados de búsqueda y más allá.</small></p>
                  </div> 
                </th>
              </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="2">
                        <div class="alert alert-error" id="box_msj_error" style="display: none;">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <h4>Error!</h4>
                            <div id="box_msj_msj_error"></div>
                        </div>
                        
                        <div class="alert alert-success" id="box_msj_ok" style="display: none;">
                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                            <h4>Bien!</h4>
                            <div id="box_msj_msj_ok">Se actualizo tu perfil correctamente.</div>
                        </div>
                        
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 10px;">Nombre de usuario</td>
                    <td>
                        <?php
                            if($usrName != null && $usrName != "")
                            {
                                echo '<input type="text" name="usernick" value="'.$usrName.'" placeholder="Usuario" readonly>';
                            }
                            else
                            {
                                echo '<input type="text" name="usernick" value="" placeholder="Usuario">';      
                            }
                        ?>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 10px;">Tu nombre real</td>
                    <td>
                        <?php
                            if($usrCompletName != null && $usrCompletName != "")
                            {
                                ?>
                                    <input type="text" name="username" id="username" value="<?php echo $usrCompletName; ?>" placeholder="Nombre">
                                <?php
                            }
                            else
                            {
                                ?>
                                    <input type="text" name="username" id="username" placeholder="Nombre">
                                <?php
                            }
                        ?>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 10px;">Correo electr&oacute;nico</td>
                    <td>
                        <?php
                            if($usrMail != null && $usrMail != "")
                            {
                                echo '<input type="text" name="usermail" value="'.$usrMail.'" placeholder="Nombre" readonly>';
                            }
                            else
                            {
                                echo '<input type="text" name="usermail" placeholder="Correo electr&oacute;nico">';      
                            }
                        ?>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 10px;">Contraseña</td>
                    <td>
                        <input type="password" name="pass" id="pass" placeholder="**********">
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right; padding-right: 10px;">Confirmar contraseña</td>
                    <td>
                        <input type="password" name="conf_pass" id="conf_pass" placeholder="**********">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align: center">
                        <br>
                        <button class="btn btn-info" id="btn_accept" href="#"><strong>Guardar cambios</strong></button>
                    </td>
                </tr>
            </tbody>
        </table>
        </div>
    </div>                       
</div>
<script>
    $('#btn_accept').click(function(){
	$('#btn_accept').attr('disabled',true);
                   
        var values=[];
        var refere=[];
        
        
        if($('#usrname').val() != "")
        {
            refere.push("usrname");
            values.push($('#username').val());
        }
        
        if($('#pass').val() != "" || $('#conf_pass').val() != "")
        {
            if($('#pass').val() == $('#conf_pass').val())
            {
                refere.push("pass");
                values.push($('#pass').val());
            }
            else
            {
                $('#box_msj_msj_error').html('Las contraseñas ingresadas no son iguales.');
                $('#box_msj_error').show();
                $('#btn_accept').removeAttr('disabled');
                return;
            }
        }
        
        var data_ajax={
                        type: 'POST',
                        url: "<?php echo base_url(); ?>index.php/user/update_profile",
                        data: { xid: $('#usr_id').val(), xvalue: values, xrefere: refere },
                        success: function( data ) {
                                                    if(data != 0)
                                                    {	
                                                       $('#box_msj_ok').show();
                                                       $('#btn_accept').removeAttr('disabled');
                                                    }
                                                    else
                                                    {
                                                       $('#box_msj_msj_error').html('Ocurrio un error al actualizar tu perfil, vuelve a intentarlo nuevamente.');
                                                       $('#box_msj_error').show();
                                                       $('#btn_accept').removeAttr('disabled');
                                                    }
                                                  },
                        error: function(){
                                $('#box_msj_msj_error').html('Ocurrio un error al actualizar tu perfil, vuelve a intentarlo mas tarde.');
                                $('#box_msj_error').show();
                                $('#btn_accept').removeAttr('disabled');
                            },
                        dataType: 'json'
                        };
			$.ajax(data_ajax);
	});
</script>